<template>
	<view>
		<view class="add-success main-basic-box">
			<view class="add-title">交易截图</view>
			<c-upload :imgs="imgList" :maxNum="1" @delImg="delImg" @addSuccess="addImg"></c-upload>
			<van-field label="姓名" :value="name" @change="name = $event.detail" placeholder="请输入" input-align="right"
				clearable>
			</van-field>
			<van-field label="电话" type="number" :maxlength="11" :value="mobile" @change="mobile = $event.detail"
				placeholder="请输入" input-align="right" clearable>
			</van-field>
			<van-field label="微信号" :value="wxchat" @change="wxchat = $event.detail" placeholder="请输入"
				input-align="right" clearable>
			</van-field>
			<van-field label="项目" readonly input-align="right">
				<template slot="button">
					<view style="color: #8A8F99"> {{project ? project : '请选择'}} <van-icon name="arrow"
							color="#BEBFC2"></van-icon> </view>
				</template>
			</van-field>
			<van-field label="成交金额" :value="money" @change="money = $event.detail" placeholder="请输入" input-align="right"
				clearable>
				<template slot="button">
					<view style="#8A8F99"><text style="color: #E2E2E2;"> | </text>元</view>
				</template>
			</van-field>
			<van-field label="佣金收入" :value="profit" @change="profit = $event.detail" placeholder="请输入"
				input-align="right" clearable>
				<template slot="button">
					<view style="#8A8F99"><text style="color: #E2E2E2;"> | </text>元</view>
				</template>
			</van-field>
		</view>
		<view class="main-basic-btn">
			<van-button block color="#4078E5" @click="submit">提交</van-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [], //交易截图
				name: '', //姓名
				mobile: '', //电话
				wxchat: '', //微信号
				project: '', //项目
				money: '', //成交金额

				order_price: 0, //市场合作价
				order_price_rate: 0, //合作价的百分比例
				project_id: null,
				profit: ''

			};
		},
		onLoad(e) {
			if (e.pid) {
				this.project_id = e.pid
			}
			if (e.order_price) {
				this.order_price = e.order_price
			}
			if (e.order_price_rate) {
				this.order_price_rate = e.order_price_rate
			}
			if (e.pname) {
				this.project = e.pname
			}
		},
		computed: {
			// 佣金收入 = 成交金额 - 市场合作价 * 合作价的百分比例
			// profit() {
			// 	if (this.money) {
			// 		return Number(this.money) - Number(this.order_price) * Number(this.order_price_rate) / 100
			// 	} else {
			// 		return 0
			// 	}
			// }
		},
		methods: {
			delImg(index) {
				this.imgList.splice(index, 1)
			},
			addImg(url) {
				this.imgList.push(url)
			},
			async submit() {
				if (this.imgList.length <= 0) {
					this.$api.showError('请上传交易截图！')
					return
				}
				if (this.name.trim() === '') {
					this.$api.showError('请输入姓名！')
					return
				}
				if (!this.$api.isValidPhone(this.mobile)) {
					this.$api.showError('请输入正确的电话！')
					return
				}
				if (this.money.trim() === '') {
					this.$api.showError('请输入成交金额！')
					return
				}
				uni.showLoading({
					title: '数据提交中...'
				})
				let ids = []
				// 评价文件
				for (let i = 0; i < this.imgList.length; i++) {
					let fid = await this.$api.requestUploadQNY(this.imgList[i])
					ids.push(fid.asset_id)
				}
				let list = {
					project_id: this.project_id,
					order_type: 4,
					payload: {
						file: ids.join(','),
						name: this.name,
						phone: this.mobile,
						wechat: this.wxchat,
						price: this.money
					},
				}
				this.$api
					.requst('/gwc/orders/create', list, 'POST')
					.then((res) => {
						this.$api.showError('提交成功！')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)

					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.add-success {
		margin-top: 32rpx;

		.add-title {
			font-size: 30rpx;
			color: #161616;
			padding-top: 4rpx;
			padding-bottom: 8rpx;
		}
	}

	::v-deep .van-cell {
		padding: 32rpx 0 !important;
	}

	::v-deep .van-field__label {
		font-size: 30rpx !important;
		color: #161616 !important;
	}

	::v-deep .van-cell:after {
		left: 0 !important;
		right: 0 !important;
	}
</style>